<template>
	<view style="height: 100%;">
		<u-navbar :title="title" autoBack placeholder :border="false"></u-navbar>
		<view class="login-box">
			<view class="login-box-title1">欢迎使用 花儿朵朵</view>
			<view class="login-box-title2">立即登录, 享受优质服务</view>
			<view class="login-box-logo">
				<view class="login-box-logo-size">
					<u--image :showLoading="true" :src="registerDetail.userInfo.avatarUrl" :fade="true"
						duration="450" shape="circle" width="140rpx" height="140rpx"></u--image>
				</view>
			</view>
			<view class="login-box-title3">为提供优质服务，需要获取您的一下信息:</view>
			<view class="login-box-title4">您的公开信息(头像、昵称等)</view>
			<u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :color="appColor" text="一键登录" shape="circle"/>
			<!-- <u-button v-else open-type="getUserInfo" @getuserinfo="getUserInfo" :color="appColor" text="授权进入" shape="circle"/> -->
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/home.js';
	import {mapActions, mapState} from 'vuex';
	export default {
		data() {
			return {
				title: '',
			}
		},
		computed: {
			...mapState(['registerDetail']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		methods: {
			...mapActions(['setUserInfo']),
			// 新版本
			getPhoneNumber(e) {
				const that = this;
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					const {iv, encryptedData} = e.detail;
					const {avatarUrl, nickName, gender} = that.registerDetail.userInfo;
					const {openid, sessionKey} = that.registerDetail;
					login({iv, encryptedData, avatarUrl, nickName, openid, sessionKey, gender}).then(res => {
						const {code, result: {token, userInfo}, success} = res;
						if(code === 200 && success) {
							that.setUserInfo({
								userInfo, 
								token
							});
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}
			}
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.login-box {
		padding: 32rpx;

		.login-box-title1 {
			padding: 32rpx 0;
			font-size: 44rpx;
			color: #000;
		}

		.login-box-title2 {
			font-size: 34rpx;
			color: #666;
		}

		.login-box-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 96rpx 0;

			.login-box-logo-size {
				width: 140rpx;
				height: 140rpx;
			}
		}

		.login-box-title3 {
			font-size: 28rpx;
			color: #fff;
			padding-bottom: 16rpx;
		}

		.login-box-title4 {
			font-size: 24rpx;
			color: #fff;
			padding-bottom: 44rpx;
		}
	}
</style>
